﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>二手书籍交易平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/preloader.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/backToTop.css">
    <link rel="stylesheet" href="assets/css/meanmenu.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
    <link rel="stylesheet" href="assets/css/fontAwesome5Pro.css">
    <link rel="stylesheet" href="assets/css/ui-range-slider.css">
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <style>
        .text-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
        }

        #search-button button:hover {
            background: #FCB700;
        }

        .my-font-weight {
            font-weight: 700;
        }
    </style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience and security.</p>
<![endif]-->

<!-- Add your site or application content here -->

<!-- preloader area start -->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div id="object"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->

<!-- header area start -->
<header class="grey-header">
    <div class="header__area">
        <div class="header__top d-none d-sm-block">
            <div class="container custom-container">
                <div class="row align-items-center">
                    <!-- 首页左上角信息 -->
                    <div class="col-xl-4 col-lg-4 col-md-5 d-none d-lg-block">
                        <div class="header__welcome">
                            <span>商品不满意时可以联系卖家或向平台申诉哦</span>
                            <a href=""></a>
                        </div>
                    </div>
                    <!-- 首页右上角会员信息 -->
                    <div class="col-xl-8 col-lg-8">
                        <div class="header__action d-flex justify-content-center justify-content-lg-end align-items-center">
                            <ul>
                                <li class="d-none d-xl-inline-block">
                                    <a th:if="${session.loginUser!=null}" href="javascript:;" th:text="${session.loginUser==null?'':session.loginUser.nickname}"></a>
                                    <a th:if="${session.loginUser==null}" href="http://huyulu666.top/login.html">登录/注册</a>
                                </li>
                                <li><a href="http://huyulu666.top:81/">个人信息管理中心</a></li>
                                <li><a href="http://huyulu666.top/center.html">我的订单</a></li>
                                <!--<li><a href="javascript:;">我的购物</a></li>-->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header__info">
            <div class="container custom-container">
                <div class="row align-items-center">
                    <div class="col-xl-3 col-lg-3 col-md-3">
                        <div class="header__info-left text-center text-md-start">
                            <div class="logo">
                                <a href="/index.html"><img src="assets/img/logo/logo-red.png" alt="logo"></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-9 col-lg-9 col-md-9">
                        <div class="header__info-right d-flex justify-content-between">
                            <div class="header__search header__search-4 f-left d-none d-sm-block">
                                <form action="http://huyulu666.top/search.html" method="get">
                                    <div id="search-button" class="header__search-box header__search-box-4">
                                        <input id="keyword" type="text" name="keyword" placeholder="请输入您需要的二手书籍">
                                        <button type="submit" style="font-weight: 700">搜 索</button>
                                    </div>
                                    <div class="header__search-cat d-none d-lg-block">
                                        <select>
                                            <option>全部分类</option>
                                            <option th:each="category:${categories}" th:text="${category.catName}"></option>
                                        </select>
                                    </div>
                                </form>
                            </div>
                            <div class="cart__mini-wrapper d-none d-sm-flex f-right p-relative">
                                <a href="javascript:;" class="cart__toggle">
                                    <span class="cart__total-item" th:text="${cartInfo.getCartTotalCount()}">01</span>
                                </a>
                                <span class="cart__content">
                                    <span class="cart__my">我的购物车:</span>
                                    <span class="cart__total-price" th:text="'￥' + ${cartInfo.getCartTotalPrice()}">$ 255.00</span>
                                </span>
                                <div class="cart__mini cart__mini-4">
                                    <div class="cart__close">
                                        <button type="button" class="cart__close-btn"><i class="fal fa-times"></i>
                                        </button>
                                    </div>
                                    <ul>
                                        <li>
                                            <div class="cart__title">
                                                <h4>我的购物车</h4>
                                                <span th:text="'（共 ' + ${cartInfo.getCartTotalTypeCount()} + ' 类书籍）'"></span>
                                            </div>
                                        </li>
                                        <li th:if="${cartInfo.getFailReason() == null}">
                                            <div class="cart__item d-flex justify-content-between align-items-center"
                                                th:each="item:${cartInfo.items}">
                                                <div class="cart__inner d-flex">
                                                    <div class="cart__thumb">
                                                        <a href="product-details.html">
                                                            <img th:src="${item.image}" alt="">
                                                        </a>
                                                    </div>
                                                    <div class="cart__details">
                                                        <h6><a href="product-details.html" th:text="${item.name} + ' x' + ${item.count}"></a></h6>
                                                        <div class="cart__price">
                                                            <span th:text="'￥' + ${item.getTotalPrice()}">$255.00</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="cart__del">
                                                    <a href="javaScript:;"><i class="fal fa-trash-alt"></i></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li th:if="${cartInfo.getFailReason() != null}">
                                            <h5 style="text-align: center; margin: 30px 0">您还没有向购物车中添加书籍</h5>
                                        </li>
                                        <li th:if="${cartInfo.getFailReason() == null}">
                                            <div class="cart__sub d-flex justify-content-between align-items-center">
                                                <h6>购物车总价</h6>
                                                <span class="cart__sub-total" th:text="${cartInfo.getCartTotalPrice()}"></span>
                                            </div>
                                        </li>
                                        <li>
                                            <a href="http://huyulu666.top/cart.html" class="t-y-btn t-y-btn-red w-100 mb-10">前往购物车</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 菜单栏和导航栏 -->
        <div class="header__bottom header__bottom-4">
            <div class="container custom-container">
                <div class="row align-items-center">
                    <!-- 菜单栏 -->
                    <div class="col-xxl-2 col-xl-3 d-none d-xl-block">
                        <div class="cat__menu-wrapper">
                            <div class="cat-toggle cat-toggle-4">
                                <button type="button" class="cat-toggle-btn cat-toggle-btn-2" style="font-weight: 700">
                                    <i class="fas fa-bars"></i>书籍分类
                                </button>
                                <div class="cat__menu cat__menu-4">
                                    <nav id="mobile-menu">
                                        <ul class="side-menu">
                                            <li th:each="category : ${categories}" th:attr="ctg-data=${category.id}">
                                                <!-- 一级分类 -->
                                                <a th:href="'http://huyulu666.top/search.html?categoryId=' + ${category.id}" th:text="${category.catName}"
                                                   style="font-weight: 700"><i class="far fa-angle-down"></i></a>
                                                <ul class="mega-menu" th:if="category.children != null">
                                                    <li th:each="catChild1:${category.children}">
                                                        <!-- 二级分类 -->
                                                        <a th:href="'http://huyulu666.top/search.html?categoryId=' + ${catChild1.id}" th:text="${catChild1.catName}"
                                                           style="font-weight: 700"></a>
                                                        <ul class="mega-item" th:if="catChild1.children != null">
                                                            <li th:each="catChild2:${catChild1.children}">
                                                                <!-- 三级分类 -->
                                                                <a th:href="'http://huyulu666.top/search.html?categoryId=' + ${catChild2.id}"
                                                                   th:text="${catChild2.catName}"></a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 导航栏 -->
                    <div class="col-xxl-7 col-xl-9 col-lg-9 col-md-12 col-sm-6 col-6">
                        <div class="header__bottom-left d-flex d-xl-block align-items-center">
                            <div class="side-menu d-xl-none mr-20">
                                <button type="button" class="side-menu-btn side-menu-btn-4 offcanvas-toggle-btn"><i
                                        class="fas fa-bars"></i></button>
                            </div>
                            <div class="main-menu main-menu-3 d-none d-md-block">
                                <nav>
                                    <ul>
                                        <li>
                                            <a href="javascript:;">首页</a>
                                        </li>
                                        <li>
                                            <a href="http://huyulu666.top/search.html">更多书籍</a>
                                        </li>
                                        <li>
                                            <a href="http://huyulu666.top/blog.html">博客</a>
                                        </li>
                                        <li><a href="http://huyulu666.top/about.html">关于我们</a></li>
                                        <li>
                                            <a href="javascript:;">快捷页面 <i class="far fa-angle-down"></i></a>
                                            <ul class="submenu">
                                                <li><a href="http://huyulu666.top/login.html">登录</a></li>
                                                <li><a href="http://huyulu666.top/register.html">注册</a></li>
                                                <li><a href="http://huyulu666.top/cart.html">购物车</a></li>
                                                <li><a href="http://huyulu666.top/pay.html">订单确认页</a></li>
                                                <li><a href="http://huyulu666.top/search.html">搜索页</a></li>
                                                <li><a href="http://huyulu666.top/center.html">个人中心</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <!-- 导航栏右边的地址电话 -->
                    <div class="col-xxl-3 d-none d-xxl-block d-laptop-none">
                        <div class="header__hotline header__hotline-4 text-end">
                            <i class="fal fa-bell"></i>
                            <span>热线: <a href="tel:100-123-456-890">(+86) 123 456 7890</a> - <a
                                    href="tel:100-123-456-890">(+86) 987 654 3210</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- header area end -->

<!-- back to top -->
<div id="scroll" class="back-to-top-btn-4">
    <a href="javascript:void(0);"><i class="fal fa-angle-double-up"></i></a>
</div>

<!-- offcanvas area start -->
<div class="offcanvas__area">
    <div class="offcanvas__wrapper">
        <div class="offcanvas__close">
            <button class="offcanvas__close-btn" id="offcanvas__close-btn">
                <i class="fal fa-times"></i>
            </button>
        </div>
        <div class="offcanvas__content">
            <div class="offcanvas__logo mb-40">
                <a href="index.html">
                    <img src="assets/img/logo/logo-black.png" alt="logo">
                </a>
            </div>
            <div class="offcanvas__search mb-25">
                <form action="#">
                    <input type="text" placeholder="What are you searching for?">
                    <button type="submit"><i class="far fa-search"></i></button>
                </form>
            </div>
            <div class="mobile-menu fix"></div>
            <div class="offcanvas__action">

            </div>
        </div>
    </div>
</div>
<!-- offcanvas area end -->
<div class="body-overlay"></div>
<!-- offcanvas area end -->

<main>
    <!-- slider area satrt -->
    <section class="slider__area pt-30 pb-30">
        <div class="container custom-container">
            <div class="row">
                <div class="col-xxl-2">

                </div>
                <div class="col-xxl-10 col-xl-9 offset-xxl-0 offset-xl-3 col-lg-12">
                    <div class="row">
                        <div class="col-xxl-9 col-lg-12 col-md-9 mb-20">
                            <div class="slider__inner slider-active">
                                <div class="single-slider single-slider-4 w-img">
                                    <img src="assets/img/slider/04/slider-01.png" alt="slider">
                                </div>
                                <div class="single-slider single-slider-4 w-img">
                                    <img src="assets/img/slider/04/slider-02.png" alt="slider">
                                </div>
                                <div class="single-slider single-slider-4 w-img">
                                    <img src="assets/img/slider/04/slider-03.png" alt="slider">
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-lg-12 col-md-3 col-sm-12">
                            <div class="banner__area">
                                <div class="row">
                                    <div class="col-xxl-12 col-xl-4 col-lg-4 col-md-6 col-sm-6">
                                        <div class="banner__item mb-20 w-img">
                                            <a href="javascript:;"><img
                                                    src="assets/img/banner/top/banner-top-01.png" alt=""></a>
                                        </div>
                                    </div>
                                    <div class="col-xxl-12 col-xl-4 col-lg-4 col-md-6 col-sm-6">
                                        <div class="banner__item w-img mb-20">
                                            <a href="javascript:;"><img
                                                    src="assets/img/banner/top/banner-top-02.png" alt=""></a>
                                        </div>
                                    </div>
                                    <div class="col-xxl-12 col-xl-4 col-lg-4 col-md-6 col-sm-6">
                                        <div class="banner__item w-img">
                                            <a href="javascript:;"><img
                                                    src="assets/img/banner/top/banner-top-03.png" alt=""></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- slider area end -->

    <!-- features area start -->
    <section class="features__area pb-20 pl-10 pr-10">
        <div class="container custom-container">
            <div class="row">
                <div class="col-xl-2"></div>
                <div class="col-xl-10">
                    <div class="features__wrapper white-bg">
                        <div class="row">
                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                                <div class="features__item features__item-4 d-flex white-bg">
                                    <div class="features__icon mr-15">
                                        <i class="fal fa-rocket-launch"></i>
                                    </div>
                                    <div class="features__content">
                                        <h6>免运费</h6>
                                        <p>校园内购物免快递</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                                <div class="features__item features__item-4 d-flex white-bg">
                                    <div class="features__icon mr-15">
                                        <i class="fal fa-sync"></i>
                                    </div>
                                    <div class="features__content">
                                        <h6>资金保证</h6>
                                        <p>7天退款保证</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                                <div class="features__item features__item-4 d-flex white-bg">
                                    <div class="features__icon mr-15">
                                        <i class="fal fa-user-headset"></i>
                                    </div>
                                    <div class="features__content">
                                        <h6>客服在线24/7</h6>
                                        <p>客服24小时全天在线解答</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                                <div class="features__item features__item-4 features__item-last d-flex white-bg">
                                    <div class="features__icon mr-15">
                                        <i class="fal fa-thumbs-up"></i>
                                    </div>
                                    <div class="features__content">
                                        <h6>安全支付</h6>
                                        <p>接受所有付款方式</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- features area end -->

    <!-- 页面主体内容 start -->
    <section class="home-wrapper">
        <div class="container custom-container">
            <div class="row">
                <!-- left area start -->
                <div class="col-xl-2 col-lg-3 d-none d-lg-block">
                    <!-- banner area start -->
                    <div class="banner__item banner__item-sidebar pt-110 m-img mb-30">
                        <a href="javascript:;"><img src="assets/img/banner/banner-9.png" alt=""></a>
                    </div>
                    <!-- banner area end -->

                    <!-- blog area start -->
                    <section class="blog__area pt-60">
                        <div class="section__head section__head-2 mb-30">
                            <div class="section__title">
                                <h3>From The<span>Blog</span></h3>
                            </div>
                        </div>
                        <div class="blog__slider-sidebar owl-carousel">
                            <div class="blog__item mb-30">
                                <div class="blog__thumb fix">
                                    <a href="blog-details.html">
                                        <img src="assets/img/blog/blog-1.jpg" alt="">
                                    </a>
                                </div>
                                <div class="blog__content white-bg">
                                    <h3><a href="blog-details.html">Curabitur Lobortis News</a></h3>
                                    <div class="blog__meta">
                                        <span>Post Date:</span>
                                        <span class="date"> 01-Jul-2020</span>
                                    </div>
                                    <p>Suspendisse turpis ipsum, tempus in nulla eu, posuere pharetra nibh. In dignissim
                                        vitae lorem non mollis. </p>
                                </div>
                            </div>
                            <div class="blog__item mb-30">
                                <div class="blog__thumb fix">
                                    <a href="blog-details.html">
                                        <img src="assets/img/blog/blog-2.jpg" alt="">
                                    </a>
                                </div>
                                <div class="blog__content white-bg">
                                    <h3><a href="blog-details.html">The Brushed Steel</a></h3>
                                    <div class="blog__meta">
                                        <span>Post Date:</span>
                                        <span class="date"> 05-Aug-2020</span>
                                    </div>
                                    <p>Suspendisse turpis ipsum, tempus in nulla eu, posuere pharetra nibh. In dignissim
                                        vitae lorem non mollis. </p>
                                </div>
                            </div>
                            <div class="blog__item mb-30">
                                <div class="blog__thumb fix">
                                    <a href="blog-details.html">
                                        <img src="assets/img/blog/blog-3.jpg" alt="">
                                    </a>
                                </div>
                                <div class="blog__content white-bg">
                                    <h3><a href="blog-details.html">Koma and Torus</a></h3>
                                    <div class="blog__meta">
                                        <span>Post Date:</span>
                                        <span class="date"> 15-Aug-2020</span>
                                    </div>
                                    <p>Suspendisse turpis ipsum, tempus in nulla eu, posuere pharetra nibh. In dignissim
                                        vitae lorem non mollis. </p>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- blog area end -->

                    <!-- 名人名言 start -->
                    <section class="testimonial__area mb-60">
                        <div class="testimonial__slider owl-carousel">
                            <div class="testimonial__item">
                                <div class="testimonial__des">
                                    <div class="testimonial__quote">
                                        <span><i class="fas fa-quote-left"></i></span>
                                    </div>
                                    <p>“谁在平日节衣缩食，在穷困时就容易度过难关；谁在富足时豪华奢侈，在穷困时就会死于饥寒。”</p>
                                </div>
                                <div class="testimonial__info">
                                    <div class="testimonial__avater">
                                        <img src="assets/img/testimonial/testimonial-1.jpg" alt="">
                                    </div>
                                    <h4>萨迪</h4>
                                    <!--                            <span>Developer</span>-->
                                </div>
                            </div>
                            <div class="testimonial__item">
                                <div class="testimonial__des">
                                    <div class="testimonial__quote">
                                        <span><i class="fas fa-quote-left"></i></span>
                                    </div>
                                    <p>“何以解忧？唯有读书。”</p>
                                </div>
                                <div class="testimonial__info">
                                    <div class="testimonial__avater">
                                        <img src="assets/img/testimonial/testimonial-2.jpg" alt="">
                                    </div>
                                    <h4>卜彦铭</h4>
                                    <span>告诫闲出屁来的带学生们</span>
                                </div>
                            </div>
                            <div class="testimonial__item">
                                <div class="testimonial__des">
                                    <div class="testimonial__quote">
                                        <span><i class="fas fa-quote-left"></i></span>
                                    </div>
                                    <p>“我需要三件东西：爱情、友情和图书。然而这三者之间何其相通！炙热的爱情可以充实读书的内容，图书又是人们最忠实的朋友。”</p>
                                </div>
                                <div class="testimonial__info">
                                    <div class="testimonial__avater">
                                        <img src="assets/img/testimonial/testimonial-3.jpg" alt="">
                                    </div>
                                    <h4>蒙田</h4>
                                    <span>众所周知，名人说啥都是对的</span>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- 名人名言 end -->
                </div>

                <!-- 页面主体部分（整个右边商品列表界面） -->
                <div class="col-xl-10 col-lg-9">

                    <!-- 最新二手 -->
                    <section class="deal__area pt-35">
                        <!-- 最新二手标题 -->
                        <div class="section__head section__head-2 mb-40">
                            <div class="section__title">
                                <h3>最新<span>二手</span></h3>
                            </div>
                        </div>
                        <!-- 最新二手里的商品项 -->
                        <div class="product__deal-2 t-nav owl-carousel">
                            <!-- 每个商品项的div -->
                            <div class="product__deal-item border-right-2" th:each="latestBook:${latestBooks}">
                                <div class="product__item product__item-4 white-bg product__sale mb-30">
                                    <div class="row">
                                        <!-- 左侧图片部分 -->
                                        <div class="col-xl-6  col-lg-6 col-md-6 col-sm-6">
                                            <div class="product__thumb product__thumb-big p-relative">
                                                <a th:href="'http://huyulu666.top/item.html?bookId=' + ${latestBook.id}" class="w-img">
                                                    <!--                                                  <img src="assets/img/shop/product/product-15.jpg" alt="product" />-->
                                                    <!--                                                  <img class="second-img" src="assets/img/shop/product/product-24.jpg" alt="product" />-->
                                                    <img th:src="${latestBook.defaultImagesUrl.get(0)}" alt="product"/>
                                                    <img class="second-img"
                                                         th:src="${latestBook.defaultImagesUrl.get(1)}" alt="product"/>
                                                </a>
                                                <div class="product__offer">
                                                    <span class="discount" th:text="'-' + ${latestBook.percent} + '%'">-20%</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 右侧信息部分 -->
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                            <div class="product__content product__content-2 product__content-4">
                                                <!-- 书籍名称 -->
                                                <h6 class="product-name product__deal-name">
                                                    <a class="product-item-link" th:href="'http://huyulu666.top/item.html?bookId=' + ${latestBook.id}"
                                                       th:text="${latestBook.bookName}"></a>
                                                </h6>
                                                <!-- 新旧、类型 -->
                                                <div class="rating rating-2">
                                                    <p th:text="${latestBook.bookTypeName} + ' — '"
                                                       style="display: inline;"></p>
                                                    <p th:text="${latestBook.bookLevel}==0?'全新':${latestBook.bookLevel}+'成新'"
                                                       style="display: inline;"></p>
                                                </div>
                                                <!-- 现价价格 -->
                                                <span class="new mb-5" th:text="'￥'+${latestBook.bookPrice}"></span>
                                                <!-- 原价 -->
                                                <span class="price-old mb-5"> <del
                                                        th:text="'￥'+${latestBook.bookOriginalPrice}"></del> </span>
                                                <!-- 备注 -->
                                                <p class="mt-10" th:text="${latestBook.remark}">这是一本好书</p>
                                                <!-- 书籍详细描述 -->
                                                <p class="mt-10 text-ellipsis" th:text="${latestBook.bookDesc}">
                                                    这是一本好书</p>
                                                <!-- 上架时间 -->
                                                <p class="mt-10" th:text="${latestBook.sellTime} + '上架'">这是一本好书</p>

                                                <a href="javascript:;" th:onclick="addToCart([[${latestBook.id}]], 1)"
                                                   class="t-y-btn t-y-btn-red w-100 mb-10">添加到购物车</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- 最新二手 end -->

                    <!-- 特价书籍 start -->
                    <section class="on__sell pb-60">
                        <div class="section__head section__head-2 d-md-flex justify-content-between mb-40">
                            <div class="section__title">
                                <h3>特价<span>书籍</span></h3>
                            </div>
                        </div>
                        <!-- 书籍项部分 -->
                        <div class="tab-content" id="on-sell">
                            <!-- 对应右上角第一个按钮 -->
                            <div class="tab-pane fade show active" id="appliances" role="tabpanel"
                                 aria-labelledby="appliances-tab">
                                <div class="product__slider owl-carousel">
                                    <!-- 商品项 -->
                                    <div th:each="specialBook:${specialBooks}"
                                         class="product__item product__item-4 border-right-2 white-bg">
                                        <!-- 图片部分 -->
                                        <div class="product__thumb p-relative">
                                            <a th:href="'http://huyulu666.top/item.html?bookId=' + ${specialBook.id}" class="w-img">
                                                <img th:src="${specialBook.defaultImagesUrl.get(0)}" alt="product">
                                                <img class="second-img" th:src="${specialBook.defaultImagesUrl.get(1)}"
                                                     alt="product">
                                            </a>
                                            <!-- 价格减少的百分比 -->
                                            <div class="product__offer">
                                                <span class="discount discount-2"
                                                      th:text="'-'+${specialBook.percent}+'%'">-14%</span>
                                            </div>
                                            <!-- 三个点击按钮(喜欢、快速查看、比较) -->
                                            <div class="product__action product__action-4 p-absolute">
                                                <ul>
                                                    <li><a href="javascript:;" title="添加到喜欢"><i
                                                            class="fal fa-heart" th:onclick="addToLikes([[${specialBook.id}]])"></i></a>
                                                    </li>
                                                    <li th:onclick="changeBookItemInfo([[${specialBook.id}]])">
                                                        <a href="javascript:;" title="快速查看" data-bs-toggle="modal"
                                                           data-bs-target="#productModalId"><i
                                                                class="fal fa-search"></i></a></li>
                                                    <li><a href="javascript:;" title="比较"><i
                                                            class="far fa-sliders-h"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- 具体信息部分 -->
                                        <div class="product__content product__content-4 text-center">
                                            <!-- 书籍标题 -->
                                            <h6 class="product-name">
                                                <a class="product-item-link" th:href="'http://huyulu666.top/item.html?bookId=' + ${specialBook.id}"
                                                   th:text="${specialBook.bookName}"></a>
                                            </h6>
                                            <!-- 评价 -->
                                            <div class="rating">
                                                <ul>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <!-- 现价 -->
                                            <span class="new mb-5" th:text="'￥'+${specialBook.bookPrice}">$120.00</span>
                                            <!-- 原价 -->
                                            <span class="price-old mb-5"> <del
                                                    th:text="'￥'+${specialBook.bookOriginalPrice}">$125.00</del> </span>
                                        </div>
                                        <!-- 添加到购物车按钮 -->
                                        <div class="product__add-btn product__add-btn-4">
                                            <button type="button" th:onclick="addToCart([[${specialBook.id}]], 1)"
                                                    class="my-font-weight">添加到购物车
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- 特价书籍 end -->

                    <!-- 价格最低 start -->
                    <section class="tv__audio pb-30">
                        <div class="section__head section__head-2 d-md-flex justify-content-between mb-40">
                            <div class="section__title">
                                <h3>低价<span>甩卖</span></h3>
                            </div>
                        </div>
                        <div class="tab-content" id="tv-audio">
                            <div class="tab-pane fade show active" id="tablet" role="tabpanel"
                                 aria-labelledby="tablet-tab">
                                <div class="product__slider owl-carousel">
                                    <!-- 商品项 -->
                                    <div class="product__item product__item-4 border-right-2 white-bg"
                                         th:each="minPriceBook:${minPriceBooks}">
                                        <div class="product__thumb p-relative">
                                            <!-- 书籍图片 -->
                                            <a th:href="'http://huyulu666.top/item.html?bookId=' + ${minPriceBook.id}" class="w-img">
                                                <img th:src="${minPriceBook.defaultImagesUrl.get(0)}" alt="product">
                                                <img class="second-img" th:src="${minPriceBook.defaultImagesUrl.get(1)}"
                                                     alt="product">
                                            </a>
                                            <!-- 价格减少比率 -->
                                            <div class="product__offer">
                                                <span class="discount discount-2"
                                                      th:text="'-'+${minPriceBook.percent}+'%'">-21%</span>
                                            </div>
                                            <!-- 三大按钮：喜欢、收藏等 -->
                                            <div class="product__action product__action-4 p-absolute">
                                                <ul>
                                                    <li><a href="javascript:;" title="添加到喜欢" th:onclick="addToLikes([[${minPriceBook.id}]])"><i class="fal fa-heart"></i></a>
                                                    </li>
                                                    <li><a th:onclick="changeBookItemInfo([[${minPriceBook.id}]])"
                                                           href="javascript:;" title="快速查看" data-bs-toggle="modal"
                                                           data-bs-target="#productModalId"><i
                                                            class="fal fa-search"></i></a></li>
                                                    <li><a href="javascript:;" title="比较"><i class="far fa-sliders-h"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="product__content product__content-4 text-center">
                                            <!-- 书籍名称 -->
                                            <h6 class="product-name">
                                                <a class="product-item-link" th:href="'http://huyulu666.top/item.html?bookId=' + ${minPriceBook.id}"
                                                   th:text="${minPriceBook.bookName}"></a>
                                            </h6>
                                            <!-- 书籍评价 -->
                                            <div class="rating">
                                                <ul>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                    <li><a href="javascript:;"><i class="far fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <!-- 书籍价格 -->
                                            <span class="new mb-5" th:text="${minPriceBook.bookPrice}"></span>
                                            <!-- 书籍原价 -->
                                            <span class="price-old mb-5"> <del
                                                    th:text="${minPriceBook.bookOriginalPrice}"></del> </span>
                                        </div>
                                        <div class="product__add-btn product__add-btn-4">
                                            <button type="button" th:onclick="addToCart([[${minPriceBook.id}]], 1)"
                                                    class="my-font-weight">添加到购物车
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- 价格最低 end -->

                    <!-- 热门分类 start -->
                    <!--<section class="category__area pb-55">
                        <div class="section__head section__head-2 d-md-flex justify-content-between mb-40">
                            <div class="section__title">
                                <h3>热门<span>分类</span></h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="category__slider t-nav owl-carousel">
                                    <div class="category__item border-right-2 w-img">
                                        <div class="category__title">
                                            <div class="category__thumb mb-25">
                                                <a href="shop.html">
                                                    <img src="assets/img/shop/product/category/cat_1.jpg" alt="">
                                                </a>
                                            </div>
                                            <h3>
                                                <a href="shop.html">Bestseller Products</a>
                                            </h3>
                                        </div>
                                        <div class="category__links">
                                            <ul>
                                                <li><a href="shop.html">Phones & Tablets</a></li>
                                                <li><a href="shop.html">Desktop & Computer</a></li>
                                                <li><a href="shop.html">TV & Audios</a></li>
                                                <li><a href="shop.html">Laptop Accessories</a></li>
                                                <li><a href="shop.html">Lenovo</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="category__item border-right-2">
                                        <div class="category__title">
                                            <div class="category__thumb mb-25">
                                                <a href="shop.html">
                                                    <img src="assets/img/shop/product/category/cat_2.jpg" alt="">
                                                </a>
                                            </div>
                                            <h3>
                                                <a href="shop.html">Phones & Tablets</a>
                                            </h3>
                                        </div>
                                        <div class="category__links">
                                            <ul>
                                                <li><a href="shop.html">Home Appliances</a></li>
                                                <li><a href="shop.html">Office Equipment</a></li>
                                                <li><a href="shop.html">Storage Devices</a></li>
                                                <li><a href="shop.html">Electrical Kettle</a></li>
                                                <li><a href="shop.html">Mobile Phones</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="category__item border-right-2">
                                        <div class="category__title">
                                            <div class="category__thumb mb-25">
                                                <a href="shop.html">
                                                    <img src="assets/img/shop/product/category/cat_3.jpg" alt="">
                                                </a>
                                            </div>
                                            <h3>
                                                <a href="shop.html">Electronic & Digital</a>
                                            </h3>
                                        </div>
                                        <div class="category__links">
                                            <ul>
                                                <li><a href="shop.html">Computer</a></li>
                                                <li><a href="shop.html">Samsung</a></li>
                                                <li><a href="shop.html">HTC</a></li>
                                                <li><a href="shop.html">Nokia</a></li>
                                                <li><a href="shop.html">cell Phone</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="category__item border-right-2">
                                        <div class="category__title">
                                            <div class="category__thumb mb-25">
                                                <a href="shop.html">
                                                    <img src="assets/img/shop/product/category/cat_4.jpg" alt="">
                                                </a>
                                            </div>
                                            <h3>
                                                <a href="shop.html">TV & Audio</a>
                                            </h3>
                                        </div>
                                        <div class="category__links">
                                            <ul>
                                                <li><a href="shop.html">Sony</a></li>
                                                <li><a href="shop.html">Samsung</a></li>
                                                <li><a href="shop.html">LG</a></li>
                                                <li><a href="shop.html">HP</a></li>
                                                <li><a href="shop.html">Beat Audio</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="category__item border-right-2">
                                        <div class="category__title">
                                            <div class="category__thumb mb-25">
                                                <a href="shop.html">
                                                    <img src="assets/img/shop/product/category/cat_5.jpg" alt="">
                                                </a>
                                            </div>
                                            <h3>
                                                <a href="shop.html">Accessories</a>
                                            </h3>
                                        </div>
                                        <div class="category__links">
                                            <ul>
                                                <li><a href="shop.html">Bags & Accessories</a></li>
                                                <li><a href="shop.html">Accessories</a></li>
                                                <li><a href="shop.html">Clothing</a></li>
                                                <li><a href="shop.html">Sports Wears</a></li>
                                                <li><a href="shop.html">Shoes</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="category__item border-right-2">
                                        <div class="category__title">
                                            <div class="category__thumb mb-25">
                                                <a href="shop.html">
                                                    <img src="assets/img/shop/product/category/cat_1.jpg" alt="">
                                                </a>
                                            </div>
                                            <h3>
                                                <a href="shop.html">Electronic & Digital</a>
                                            </h3>
                                        </div>
                                        <div class="category__links">
                                            <ul>
                                                <li><a href="shop.html">Computer</a></li>
                                                <li><a href="shop.html">Samsung</a></li>
                                                <li><a href="shop.html">HTC</a></li>
                                                <li><a href="shop.html">Nokia</a></li>
                                                <li><a href="shop.html">cell Phone</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>-->
                    <!-- 热门分类 end -->

                    <!-- 全新二手 start -->
                    <section class="recomended__area pb-60">
                        <div class="section__head section__head-2 d-md-flex justify-content-between mb-40">
                            <div class="section__title">
                                <h3>全新<span>二手</span></h3>
                            </div>
                        </div>
                        <div class="tab-content" id="recomended">
                            <div class="tab-pane fade show active" id="fashion" role="tabpanel"
                                 aria-labelledby="fashion-tab">
                                <div class="product__slider owl-carousel">
                                    <div class="product__item product__item-4 border-right-2 white-bg"
                                         th:each="maxLevelBook:${maxLevelBooks}">
                                        <div class="product__thumb p-relative">
                                            <!-- 图片 -->
                                            <a th:href="'http://huyulu666.top/item.html?bookId=' + ${maxLevelBook.id}" class="w-img">
                                                <img th:src="${maxLevelBook.defaultImagesUrl.get(0)}" alt="product">
                                                <img class="second-img" th:src="${maxLevelBook.defaultImagesUrl.get(1)}"
                                                     alt="product">
                                            </a>
                                            <!-- 优惠比率 -->
                                            <div class="product__offer">
                                                <span class="discount discount-2"
                                                      th:text="'-'+${maxLevelBook.percent}+'%'"></span>
                                            </div>
                                            <!-- 三大按钮 -->
                                            <div class="product__action product__action-4 p-absolute">
                                                <ul>
                                                    <li><a href="javascript:;" title="添加到喜欢" th:onclick="addToLikes([[${maxLevelBook.id}]])"><i class="fal fa-heart"></i></a>
                                                    </li>
                                                    <li><a th:onclick="changeBookItemInfo([[${maxLevelBook.id}]])"
                                                           href="javascript:;" title="快速查看" data-bs-toggle="modal"
                                                           data-bs-target="#productModalId"><i
                                                            class="fal fa-search"></i></a></li>
                                                    <li><a href="javascript:;" title="比较"><i class="far fa-sliders-h"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="product__content product__content-4 text-center">
                                            <!-- 书籍名称 -->
                                            <h6 class="product-name">
                                                <a class="product-item-link"
                                                   th:href="'http://huyulu666.top/item.html?bookId='+${maxLevelBook.id}"
                                                   th:text="${maxLevelBook.bookName}"></a>
                                            </h6>
                                            <div th:text="${maxLevelBook.bookLevel} == 10 ? '全新' : ${maxLevelBook.bookLevel}+' 成新'"></div>
                                            <!-- 现价 -->
                                            <span class="new mb-5" th:text="${maxLevelBook.bookPrice}"></span>
                                            <!-- 原价 -->
                                            <span class="price-old mb-5"> <del
                                                    th:text="${maxLevelBook.bookOriginalPrice}"></del> </span>
                                        </div>
                                        <div class="product__add-btn product__add-btn-4">
                                            <button type="button" th:onclick="addToCart([[${maxLevelBook.id}]], 1)"
                                                    class="my-font-weight">添加到购物车
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- 全新二手 end -->
                </div>
            </div>
        </div>
    </section>
    <!-- 页面主体内容 end -->

    <!-- brand area start -->
    <section class="brand__area">
        <div class="container custom-container">
            <div class="row align-items-center">
                <div class="col-xl-12">
                    <div class="brand__slider owl-carousel">
                        <div class="brand__item">
                            <img src="assets/img/brand/brand-1.jpg" alt="">
                        </div>
                        <div class="brand__item">
                            <img src="assets/img/brand/brand-2.jpg" alt="">
                        </div>
                        <div class="brand__item">
                            <img src="assets/img/brand/brand-3.jpg" alt="">
                        </div>
                        <div class="brand__item">
                            <img src="assets/img/brand/brand-4.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- brand area end -->

    <!-- 商品项的具体数据 start -->
    <div class="modal fade" id="productModalId" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered product__modal" role="document">
            <div class="modal-content">
                <!-- 商品项 -->
                <div class="product__modal-wrapper p-relative">
                    <!-- 关闭按钮 -->
                    <div class="product__modal-close p-absolute">
                        <button data-bs-dismiss="modal"><i class="fal fa-times"></i></button>
                    </div>
                    <!-- 商品项主体 -->
                    <div class="product__modal-inner">
                        <div class="row">
                            <!-- 左边图片部分 -->
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="product__modal-box">
                                    <div class="tab-content" id="modalTabContent">
                                    </div>
                                    <ul class="nav nav-tabs" id="modalTab" role="tablist">
                                    </ul>
                                </div>
                            </div>
                            <!-- 右边文字部分 -->
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                <div class="product__modal-content">
                                    <!-- 商品标题 -->
                                    <h4 id="book_item_title"><a href="javascript:;"></a></h4>
                                    <!-- 商品描述 -->
                                    <div id="book_item_desc" class="product__modal-des mb-40">
                                        <p class="text-ellipsis"></p>
                                    </div>
                                    <!-- 书籍备注 -->
                                    <div id="book_item_remark" class="product__modal-des mb-40">
                                        <p></p>
                                    </div>
                                    <!-- 剩余商品数量 -->
                                    <div class="product__stock">
                                        <span>剩余数量：</span>
                                        <span id="book_item_count"></span>   <!-- 高亮 -->
                                    </div>
                                    <!-- 书籍类型 -->
                                    <div class="product__stock">
                                        <span>书籍类型：</span>
                                        <span id="book_item_type"></span>   <!-- 高亮 -->
                                    </div>
                                    <!-- 书籍新旧程度 -->
                                    <div class="product__stock mb-30">
                                        <span>新旧程度：</span>
                                        <span id="book_item_level"></span>   <!-- 高亮 -->
                                    </div>
                                    <!-- 评价 -->
                                    <div class="product__review d-sm-flex">
                                        <div class="rating rating__shop mb-15 mr-35">
                                            <ul>
                                                <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                                <li><a href="javascript:;"><i class="fal fa-star"></i></a></li>
                                            </ul>
                                        </div>
                                        <div class="product__add-review mb-15">
                                            <span><a href="javascript:;">1 条评论</a></span>
                                            <span><a href="javascript:;">添加评论</a></span>
                                        </div>
                                    </div>
                                    <!-- 价格 -->
                                    <div class="product__price">
                                        <span id="book_item_price" style="color: red; font-weight: 700"></span>
                                        <span id="book_item_original_price"><del
                                                style="color: #999999; font-size: small"></del></span>
                                    </div>
                                    <!-- 选择数量和添加购物车按钮 -->
                                    <div class="product__modal-form mb-30">
                                        <form action="http://huyulu666.top/addToCart.html">
                                            <input id="product_add_id" name="bookId" type="text" value=""
                                                   style="display: none"/>
                                            <div class="pro-quan-area d-lg-flex align-items-center">
                                                <div class="product-quantity mr-20 mb-25">
                                                    <div id="product_add_info" class="cart-plus-minus p-relative">
                                                        <input name="count" type="text" value="1"/>
                                                    </div>
                                                </div>
                                                <div class="pro-cart-btn mb-25">
                                                    <button class="t-y-btn" type="submit">添加到购物车</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- 商品项菜单：喜欢、比较、打印、分享 -->
                                    <div class="product__modal-links">
                                        <ul>
                                            <li><a id="likeBook" href="javascript:;" title="添加到喜欢"><i class="fal fa-heart"></i></a>
                                            </li>
                                            <li><a href="javascript:;" title="比较"><i class="far fa-sliders-h"></i></a></li>
                                            <li><a href="javascript:;" title="分享"><i class="fal fa-share-alt"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 商品项的具体数据 end -->
</main>

<!-- footer area start -->
<footer>
    <div class="footer__area footer-bg-2">
        <div class="footer__top pt-80 pb-40">
            <div class="container custom-container">
                <div class="row">
                    <!-- 图片地址、信息、服务 -->
                    <div class="col-xl-6 col-lg-12">
                        <div class="footer__top-left">
                            <div class="row">
                                <!-- 页脚左侧 -->
                                <div class="col-xl-5 col-lg-6 col-md-6 col-sm-6">
                                    <div class="footer__widget">
                                        <!-- 页脚图片 -->
                                        <div class="footer__widget-title mb-45">
                                            <div class="footer__logo">
                                                <a href="index.html"><img src="assets/img/logo/logo-red.png" alt=""></a>
                                            </div>
                                        </div>
                                        <!-- 电话 -->
                                        <div class="footer__widget-content">
                                            <div class="footer__hotline footer__hotline-4 d-flex align-items-center mb-30">
                                                <div class="icon mr-15">
                                                    <i class="fal fa-headset"></i>
                                                </div>
                                                <div class="text">
                                                    <h4>24小时热线电话：</h4>
                                                    <span>(+86) 123 456 7890</span>
                                                </div>
                                            </div>
                                            <div class="footer__info footer__info-4">
                                                <ul>
                                                    <li>
                                                        <span>地址:
                                                            <a target="_blank" href="javascript:;">安徽省 安庆市 安庆师范大学</a>
                                                        </span>
                                                    </li>
                                                    <li><span>邮箱:
                                                        <a href="javascript:;"><span
                                                            class="__cf_email__"
                                                            data-cfemail="6900070f06291d010c0b1c0c1a0210470a0604">1085068942@qq.com</span></a>  </span>
                                                    </li>
                                                    <li><span>传真: <a href="tel:123-456-7890">(+86) 123 456 7890</a> - <a
                                                            href="tel:-100-123-456-7891">(+86) 123 456 7891</a> </span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-7 col-lg-6 col-md-6 col-sm-6">
                                    <div class="row">
                                        <!-- 信息 -->
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                            <div class="footer__widget">
                                                <div class="footer__widget-title footer__widget-title-4">
                                                    <h4>信息</h4>
                                                </div>
                                                <div class="footer__widget-content">
                                                    <div class="footer__link footer__link-4">
                                                        <ul>
                                                            <li><a href="javascript:;">客户服务</a></li>
                                                            <li><a href="javascript:;">常见问题解答</a></li>
                                                            <li><a href="javascript:;">订购跟踪</a></li>
                                                            <li><a href="javascript:;">联系人</a></li>
                                                            <li><a href="javascript:;">活动</a></li>
                                                            <li><a href="javascript:;">热门</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 服务 -->
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                            <div class="footer__widget">
                                                <div class="footer__widget-title footer__widget-title-4">
                                                    <h4>服务</h4>
                                                </div>
                                                <div class="footer__widget-content">
                                                    <div class="footer__link footer__link-4">
                                                        <ul>
                                                            <li><a href="javascript:;">网站地图</a></li>
                                                            <li><a href="javascript:;">隐私政策</a></li>
                                                            <li><a href="javascript:;">你的帐户</a></li>
                                                            <li><a href="javascript:;">高级搜索</a></li>
                                                            <li><a href="javascript:;">条款与协议</a></li>
                                                            <li><a href="javascript:;">联系我们</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-12">
                        <div class="row">
                            <!-- 账户和付款运输 -->
                            <div class="col-xl-7 col-lg-6 col-md-6 col-sm-6">
                                <div class="row">
                                    <!-- 我的账户 -->
                                    <div class="col-xl-6 col-lg-6">
                                        <div class="footer__widget">
                                            <div class="footer__widget-title footer__widget-title-4">
                                                <h4>我的账户</h4>
                                            </div>
                                            <div class="footer__widget-content">
                                                <div class="footer__link footer__link-4">
                                                    <ul>
                                                        <li><a href="javascript:;">关于我们</a></li>
                                                        <li><a href="javascript:;">配送信息</a></li>
                                                        <li><a href="javascript:;">隐私政策</a></li>
                                                        <li><a href="javascript:;">折扣</a></li>
                                                        <li><a href="javascript:;">客户服务</a></li>
                                                        <li><a href="javascript:;">条款与协议</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 付款和运输 -->
                                    <div class="col-xl-6 col-lg-6">
                                        <div class="footer__widget">
                                            <div class="footer__widget-title footer__widget-title-4">
                                                <h4>付款和运输</h4>
                                            </div>
                                            <div class="footer__widget-content">
                                                <div class="footer__link footer__link-4">
                                                    <ul>
                                                        <li><a href="javascript:;">使用条款</a></li>
                                                        <li><a href="javascript:;">支付方式</a></li>
                                                        <li><a href="javascript:;">运输指南</a></li>
                                                        <li><a href="javascript:;">运送地点</a></li>
                                                        <li><a href="javascript:;">预计送达时间</a></li>
                                                        <li><a href="javascript:;">描述</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-5 col-lg-6 col-md-6 col-sm-6">
                                <div class="footer__widget">
                                    <div class="footer__widget-title">
                                        <h4>订阅时网站博客</h4>
                                    </div>
                                    <div class="footer__widget-content">
                                        <div class="footer__subscribe">
                                            <p><span>每天前100名加入订阅者</span> 即可在每周六获得一张折扣券</p>
                                            <div class="footer__subscribe-form">
                                                <form action="javascript:;">
                                                    <input type="email" placeholder="输入您的电子邮箱地址">
                                                    <button type="submit">订阅</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer__copyright footer__copyright-2 pt-30 pb-35 footer-bg-2">
            <div class="container custom-container">
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-6">
                        <div class="footer__copyright-text footer__copyright-text-2">
                            <p>版权所有 © <a href="index.html">校园二手书籍交易平台.</a> 违者必究</p>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6">
                        <div class="footer__payment f-right">
                            <a href="javascript:;" class="m-img"><img src="assets/img/icon/payment.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer area end -->

<!-- JS here -->
<script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/meanmenu.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/backToTop.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/nice-select.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery-ui-slider-range.js"></script>
<script src="assets/js/ajax-form.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
    //动态获取书籍详细信息后回填
    function changeBookItemInfo(id) {
        $.ajax({
            type: "get",
            // data : {'dbId':node.dbId,'viewId':node.id,'date':new Date()},
            url: "http://huyulu666.top/item/" + id + ".html",
            dataType: "json",

            success: function (response) {
                console.log(response);
                $("#book_item_title a").text(response.bookName);    // 名称
                $("#book_item_desc p").text(response.bookDesc);     // 描述
                $("#book_item_remark p").text(response.remark);     // 备注
                $("#book_item_count").text(response.bookCount + " 件");  // 库存
                $("#book_item_type").text(response.bookTypeName);   // 类型
                if (response.bookLevel == 10) $("#book_item_level").text("全新");  // 新旧程度
                else $("#book_item_level").text(response.bookLevel + " 成新");
                $("#book_item_price").text("￥" + response.bookPrice);  // 价格
                $("#book_item_original_price del").text("￥" + response.bookOriginalPrice);  // 价格
                // 设置书籍图片
                $("#modalTabContent").empty();
                $("#modalTab").empty();
                $("#product_add_id").val(response.id);
                for (let i = 0; i < response.imagesArray.length; i++) {
                    if (i == 0) {
                        $("#modalTabContent").append(`<div class="tab-pane fade show active" id="nav1" role="tabpanel" aria-labelledby="nav1-tab">
                            <div class="product__modal-img w-img book_item_image">
                                <img src="${response.imagesArray[0]}" alt="" width="100%" height="auto">
                            </div>
                        </div>`);
                        $("#modalTab").append(`<li class="nav-item" role="presentation">
                            <button class="nav-link active" id="nav1-tab" data-bs-toggle="tab"
                                data-bs-target="#nav1" type="button" role="tab" aria-controls="nav1"
                                aria-selected="true">
                            <img src="${response.imagesArray[0]}" alt="" width="85px">
                            </button>
                        </li>`);

                    } else {
                        $("#modalTabContent").append(`
                            <div class="tab-pane fade" id="nav${i + 1}" role="tabpanel" aria-labelledby="nav${i + 1}-tab">
                                <div class="product__modal-img w-img book_item_image">
                                    <img src="${response.imagesArray[i]}" alt="" width="100%" height="auto">
                                </div>
                            </div>
                        `);
                        $("#modalTab").append(`<li class="nav-item" role="presentation">
                            <button class="nav-link" id="nav1-tab" data-bs-toggle="tab"
                                data-bs-target="#nav${i + 1}" type="button" role="tab" aria-controls="nav${i + 1}"
                                aria-selected="true">
                            <img src="${response.imagesArray[i]}" alt="" width="85px">
                            </button>
                        </li>`);
                    }

                }

                $("#likeBook").off("click")
                $("#likeBook").click(function () {
                    addToLikes(response.id);
                })
            },
            error: function (data) {
            }
        });
    }

    function addToCart(id, count) {
        console.log(id)
        location.href = "http://huyulu666.top/addToCart.html?bookId=" + id + "&count=" + count;
    }

    //添加到喜欢
    function addToLikes(bookId) {
        $.ajax({
            type: "post",
            data : {'bookId':bookId},
            url: "http://huyulu666.top/addToLikes",
            dataType: "json",

            success: function (response) {
                console.log(response)
                if (response == true){
                    alert("添加成功")
                } else {
                    alert("添加失败，书籍可能已存在于您的喜欢列表中")
                }
            },
            error: function (data) {
            }
        });
    }
</script>
</body>
</html>
